<template>
	<view>
		<cu-custom :bgLiner="true" :isBlack="false">
			<block slot="content">包房详情</block>
		</cu-custom>
		<view class="position-rel z-i-1" :style="{height:(windwoHeight - CustomBar)+'px'}" style="overflow-y: auto;overflow-x: hidden;">
			<view class="circle-orange"></view>
			<view class="position-rel z-i-2 contents" style="overflow-y: auto;overflow-x: hidden;">
				<view class="">
					<swiper class="swiper" circular :autoplay="true" :interval="3000">
						<swiper-item v-for="(item,index) in banner" :key="index" @click="preImgOrVideo(item,index)">
							<view class="swiper-item">
								<image :src="item.url" class="swiper-item-img" mode="aspectFill" v-if="item.type==1"></image>
								<image :src="item.url+'?x-oss-process=video/snapshot,t_1000,m_fast'" class="swiper-item-img" mode="aspectFill" v-if="item.type==2"></image>
								<view class="play-icon" v-if="item.type==2">
									<view class="play-icon-center"></view>
								</view>
							</view>
						</swiper-item>
					</swiper>
				</view>
				<view class="wrap m-t-10">
					<view class="flex">
						<view class="fontBold f-16 orange">
							{{info.name}}
						</view>
						<view class="flex flex-wrap p-l-10">
							<view class="room-desc m-r-5 m-t-2" v-for="(item2,index2) in ambient_arr">
								{{item2.name}}
							</view>
							<view class="room-desc m-r-5 m-t-2" v-for="(item2,index2) in amuse_arr">
								{{item2.name}}
							</view>
						</view>
					</view>
					<!-- <view class="m-t-12">
						<view class="">
							<view class="f-16 fontBold">
								请输入准备用餐人数
							</view>
							<view class="p-b-8 scale-1px-bottom p-t-8">
								<input type="number" v-model="postData.number" placeholder="人数" class="f-13" />
							</view>
						</view>
						<view class="m-t-12">
							<view class="f-16 fontBold">
								请输入用餐开始时间
							</view>
							<view class="flex align-center">
								<view class="flex align-center p-t-5 p-l-10 p-r-25 p-b-5" @click="changeSel(1)">
									<image :src="postData.when==1?'/static/img/seled.png':'/static/img/sel.png'" class="sel" mode=""></image>
									<view class="p-l-5">
										中午
									</view>
								</view>
								<view class="flex align-center p-t-5 p-l-10 p-r-25 p-b-5" @click="changeSel(2)">
									<image :src="postData.when==2?'/static/img/seled.png':'/static/img/sel.png'" class="sel" mode=""></image>
									<view class="p-l-5">
										晚上
									</view>
								</view>
							</view>
							<view class="p-b-8 scale-1px-bottom p-t-2" @click="openDatetimePicker" :class="[postData.time?'':'black-6']">
								{{postData.time?postData.time:'时间'}}
							</view>
						</view>
					</view> -->
				</view>
			</view>
			
			<!-- <view style="height: 130rpx;"></view>
			<view class="bottom-wrap flex justify-space-around">
				<view class="bottom-btn bottom-btn1" @click="sub(1)">
					人均点餐
				</view>
				<view class="bottom-btn bottom-btn2" @click="sub(2)">
					菜单点餐
				</view>
			</view> -->
		</view>

		
		<uni-popup ref="popup" type="center" :animation="false">
			<view class="popup_content">
				<view class="fontBold f-22 orange text-center m-b-15">
					提示
				</view>
				<view class="f-16 fontBold">
					尊敬的客户：您好！此包间超出人数，请重新选择包间。
				</view>
				<view class="flex justify-center m-t-20">
					<view class=" btn" @click="closePop">
						确认
					</view>
				</view>
			</view>
		</uni-popup>
		<buuug7-simple-datetime-picker ref="myPicker" @submit="handleSubmit" :start-year="startYear" :end-year="endYear"
			:time-init="timeInit" :time-hide="[true, true, true, true, true, false]"
			:time-label="['年', '月', '日', '时', '分', '秒']" />
		<openVideo :src="videoSrc" ref="videoPlay"></openVideo>
	</view>
</template>

<script>
	import SimpleDateTimePicker from "uni_modules/buuug7-simple-datetime-picker/components/buuug7-simple-datetime-picker/buuug7-simple-datetime-picker.vue";
	import openVideo from '@/components/openVideo/open-video.vue';
	export default {
		components:{
			SimpleDateTimePicker,
			openVideo
		},
		data() {
			return {
				banner: [],
				postData: {
					number: '',
					time: '',
					when:1,//1中午 2晚上
				},
				windwoHeight: 675,
				id: 0,
				roomId: 0,
				amuse_arr: [],
				ambient_arr: [],
				info: {},
				videoSrc:'',
				imgList:[],
				ordertype:1,//1人均点餐  2菜单点餐
			}
		},
		onLoad(option) {
			this.windwoHeight = uni.getSystemInfoSync().windowHeight;
			this.id = option.id;
			this.roomId = option.roomId;
			this.getInfo();
		},
		computed: {
			startYear() {
				let date = new Date();
				return date.getFullYear();
			},
			endYear() {
				let date = new Date();
				let end = date.getFullYear() + 10;
				return end;
			},
			timeInit() {
				return new Date().getTime();
			},
		},
		methods: {
			sub(type) {
				if(this.postData.number==''){
					this.$util.showToast('请输入人数',1500);
					return;
				}
				if(this.postData.time==''){
					this.$util.showToast('请选择时间',1500);
					return;
				}
				
				let times = Number(this.postData.time.slice(11,13));
				if(this.postData.when==1&&this.postData.time&&times>14){
					this.$util.showToast('请选择下午三点之前的时间',1500);
					return;
				}
				if(this.postData.when==2&&this.postData.time&&times<15){
					this.$util.showToast('请选择下午三点之后的时间',1500);
					return;
				}
				this.ordertype = type;
				let data = {
					compartment_id: this.roomId,
					book_at:this.postData.time,
					user_num:this.postData.number,
					when:this.postData.when
				}
				this.$http('/apicloud/Order/verifyCompartment', data).then(res => {
					if (res.code == 200) {
						let number = this.info.number;
						if(Number(this.postData.number > Number(number))){
							this.$refs.popup.open();
							return;
						}else{
							uni.navigateTo({
								url: '/pages/operate/orderFood?type=' + this.ordertype+'&id='+this.id+'&roomId='+this.roomId+'&book_at='+this.postData.time+'&user_num='+this.postData.number+'&when='+this.postData.when
							})
						}
					}else{
						this.$util.showToast(res.mess);
					}
				})
			},
			closePop() {
				this.$refs.popup.close();
				// this.$store.state.singleId = this.roomId;
				// uni.navigateBack();
				uni.navigateTo({
					url: '/pages/operate/orderFood?type=' + this.ordertype+'&id='+this.id+'&roomId='+this.roomId+'&book_at='+this.postData.time+'&user_num='+this.postData.number+'&when='+this.postData.when
				})
			},
			getInfo() {
				let data = {
					compartment_id: this.roomId
				}
				this.$http('/apicloud/Shop/shopCompartment', data).then(res => {
					if (res.code == 200) {
						let datas = res.data;
						this.info = datas.info;
						this.amuse_arr = datas.amuse_arr;
						this.ambient_arr = datas.ambient_arr;
						let list = this.info.img ? this.info.img.split(',') : [];
						let arr = [];
						list.forEach(item=>{
							arr.push({
								url:item,
								type:item.slice(-3)=='mp4'?2:1
							})
						})
						this.banner = arr;
						let arr2 = [];
						this.banner.forEach((items,indexs)=>{
							if(items.type==1){
								arr2.push(items.url);
							}
						})
						this.imgList = arr2;
					}
				})
			},
			openDatetimePicker() {
				this.$refs.myPicker.show();
			},
			closeDatetimePicker() {
				this.$refs.myPicker.hide();
			},
			handleSubmit(e) {
				this.postData.time = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}`;
			},
			changeSel(type){
				this.postData.when = type;
				this.postData.time = '';
			},
			playVideos(item){
				this.videoSrc = item.url;
				setTimeout(()=>{
					this.$refs.videoPlay.openMedia();
				},200)
			},
			preImgOrVideo(item,index){
				if(item.type==1){
					let i = 0;
					this.imgList.forEach((items,indexs)=>{
						if(items==item.url){
							i = indexs;
						}
					})
					uni.previewImage({
						urls:this.imgList,
						current:i
					})
				}else{
					this.playVideos(item);
				}
			},
		}
	}
</script>

<style lang="less">
	.circle-orange {
		width: 650px;
		height: 580px;
		background: #FF5200;
		border-radius: 50%;
		position: absolute;
		top: -340px;
		left: 50%;
		transform: translateX(-50%);
	}

	.swiper {
		height: 580rpx;
		border-radius: 30rpx;
	}

	.swiper-item {
		display: block;
		height: 580rpx;
		border-radius: 30rpx;

		.swiper-item-img {
			height: 580rpx;
			border-radius: 30rpx;
			width: 100%;
		}
	}

	.wrap {}

	.room-desc {
		background: #FFFAE6;
		border-radius: 4rpx;
		padding: 2rpx 6rpx;
		color: #FFCB00;
		font-size: 24rpx;
	}

	.bottom-wrap {
		box-shadow: 0px -3px 6px rgba(0, 0, 0, 0.07);
		border-radius: 20px 20px 0 0;
		height: 130rpx;
		position: absolute;
		bottom: 0;
		left: 0;
		background: #ffffff;
		width: 100%;
		padding: 15rpx 30rpx 0 30rpx;

		.bottom-btn {
			width: 45%;
			height: 76rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #ffffff;
			font-weight: bold;
			border-radius: 60rpx;
		}

		.bottom-btn1 {
			background: #FFCB00;
		}

		.bottom-btn2 {
			background: #FF5200;
		}
	}

	.popup_content {
		width: 90%;
		margin-left: 5%;
		min-width: 660rpx;
		min-height: 350rpx;
		background-color: #fff;
		border-radius: 24rpx;
		font-size: 28rpx;
		position: relative;
		padding: 30rpx;

		.btn {
			background: #FF5200;
			color: #ffffff;
			border-radius: 60rpx;
			width: 40%;
			height: 76rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
	.sel{
		width: 32rpx;
		height: 32rpx;
	}
	.play-icon{
		position: absolute;
		top: 50%;
		left: 50%;
		width: 80rpx;
		height: 80rpx;
		border: 1px solid #ffffff;
		color: #ffffff;
		border-radius: 50%;
		background: rgba(0, 0, 0, .5);
		transform:translate(-50%,-50%);
		display: flex;
		align-items: center;
		justify-content: center;
		.play-icon-center{
			width: 0;
			height: 0;
			border-top: 16rpx solid transparent;
			border-bottom: 16rpx solid transparent;
			border-left: 28rpx solid #ffffff;
			border-right: 20rpx solid transparent;
			margin-left: 28rpx;
		}
	}
</style>